﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge" />
    <link rel="shortcut icon" href="example/favicon.ico" />
    <title>jQuery EasyUI 1.5.x Of Insdep theme examples</title>
    <!--
        注意样式表优先级
        主题样式必须在easyui组件样式后。
    -->
    <link href="https://cdn.insdep.com/themes/1.0.0/easyui.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.insdep.com/themes/1.0.0/easyui_animation.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.insdep.com/themes/1.0.0/easyui_plus.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.insdep.com/themes/1.0.0/insdep_theme_default.css" rel="stylesheet" type="text/css">
    <link href="https://cdn.insdep.com/themes/1.0.0/icon.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="https://cdn.insdep.com/jquery/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://cdn.insdep.com/easyui/jquery.easyui-1.5.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.insdep.com/themes/1.0.0/jquery.insdep-extend.min.js"></script>
    <style type="text/css">
        .layout-panel-west{ border-right: 1px solid #c5c5c5; }
    </style>


</head>

<body>
<div id="master-layout">
    <div data-options="region:'north',border:false,bodyCls:'theme-header-layout'">
        <div class="theme-navigate">
            <div class="left">
                <a href="#" class="easyui-linkbutton" target="_blank">首页</a>
                <a href="#" class="easyui-linkbutton" target="_blank">后台</a>
                <a href="#" class="easyui-linkbutton" target="_blank">关于</a>
            </div>
            <div class="right">
                <a href="#" class="easyui-menubutton theme-navigate-user-button" data-options="menu:'.theme-navigate-user-panel'">匿名</a>
                <!--这是用户面板-->
                <div class="theme-navigate-user-panel">
                    <dl>
                        <dd>
                            <img src="https://cdn.insdep.com/themes/1.0.0/images/portrait86x86.png" width="86" height="86">
                            <b class="badge-prompt">匿名<i class="badge color-important">10</i></b>
                            <span>gaoyu@21at.com</span>
                            <p>安全等级：<i class="text-success">高</i></p>
                        </dd>
                        <dt>
                            <a class="theme-navigate-user-modify">修改资料</a>
                            <a class="theme-navigate-user-logout">注销</a>
                        </dt>
                    </dl>
                </div>
                <!--end 这是用户面板-->
                <a href="#" class="easyui-menubutton theme-navigate-more-button" data-options="menu:'#more',hasDownArrow:false"></a>
                <div id="more" class="theme-navigate-more-panel">
                    <div>联系我们</div>
                    <div>参与改进计划</div>
                    <div>关于</div>
                </div>
            </div>
        </div>
    </div>
    <div data-options="region:'west',split:true,border:false" title="菜单导航栏" style="width:250px; padding:10px 20px;">
        <ul class="easyui-tree">
            <li>
                <span>系统管理</span>
                <ul>
                    <li>
                        <span><a href="#" onClick="$.insdep.control('http://localhost:8080/sysUser/index.html')">人员管理</a></span></span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div data-options="region:'center',border:false" title="预览">
        <div class="easyui-panel" id="control" data-options="fit:true,border:false" style="padding:20px; background:#fff;">
            <div style="font-size:14px;">
            </div>
        </div>
    </div>
</div>
<script>
    $(function(){
        /*布局部分*/
        $('#master-layout').layout({
            fit:true/*布局框架全屏*/
        });
    });
</script>
</body>
</html>